<template>
    <div class="main">
        <textarea  placeholder="写点什么..." maxlength="150" id="textarea" v-model="content"></textarea>
        <mt-button size="large" @click="post()" >提交</mt-button>
        <hr/>
        <ul>
            <li v-for="(item,index) in commentList">
                <p>
                    <span>第{{index+1}}楼</span> 
                    <span>{{item.user_name}}</span>
                    <span>{{item.add_time|dataFormat()}}</span>
                </p>
                <p @mousemove="mover($event)" @mouseout="out($event)">{{item.content=='undefined'?"该用户很懒...":item.content}}</p>
            </li>
        </ul>
        <mt-button size="large" @click="getMore()">查看更多</mt-button>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
    props:["newid"],
    data(){
        return {
        newsid:this.newid,
        pageindex:1,
        commentList:[],
        content:"",
        }
    },
    methods:{
        get(){
            this.$http.get("api/getcomments/"+this.newsid+"?pageindex="+this.pageindex).then(
                result=>{
                    if(result.body.status==0){
                         this.commentList=this.commentList.concat(result.body.message);
 
                    }else{
                        console.log("失败");
                    }
                }
            )
        },
        mover(e){
            var thisDom = e.currentTarget;
            thisDom.style.background="white";
            thisDom.style.border="1px solid rgb(206, 236, 229)" ;
        },
        out(e){
            var thisDom = e.currentTarget;
            thisDom.style.background="#edecf2";
            thisDom.style.border="1px solid silver" ;
        },
        getMore(){
            this.pageindex++;
           this.get(); 
    
        },
        post(){
            
           if(this.content!==""){
                this.$http.post("api/postcomment/"+this.newsid,{
               content:this.content,
            },{
                header:"application/x-www-form-urlencoded",//请求头
            }).then(
                result=>{
                 if(result.body.status==0){
                    this.$messagebox.alert(result.body.message).then(action => {
                        var obj={
                            "add_time":new Date(),
                            "content":this.content,
                            "item.user_name":"匿名用户"
                        }
                        this.commentList.unshift(obj);
                        
                    });
                    }else{
                    console.log("失败");
                }
            }) 
            }else{
            //  this.$messagebox.alert("内容不能为空").then(action => {
                       
            //         });
                return Toast('内容不能为空');
            }
           
        },
    },
    created:function(){
        this.get();
        
    },
   
      
   

}
</script>
<style lang="scss" scoped>
ul{margin: 0;padding: 0;}
li{
    margin: 20px 0px;
    background: #edecf2 ;
    list-style: none;
    border-radius: 5px;
    padding: 5px;
    color: dimgray;
     p:nth-of-type(1){
       span{
            display: inline-block;
            margin-right: 10px;
       }
       span:nth-of-type(3){
          float: right;
       }
    }
    p:nth-of-type(2){
        border-radius: 5px;
        border: 1px solid silver;
        padding: 3px;
    }
}
</style>

